import { RootState } from "@/redux";
import { Descriptions, Drawer } from "antd";
import React, { useMemo, useState } from "react";
import { useSelector } from "react-redux";
import { Image } from "antd";
import zhanwei from "@/assets/images/zhanwei.png";

const CircleFriendDetail: React.FC = props => {
	const data = useSelector((state: RootState) => state.circleFriend.circleFriendDetail);

	const isTop = useMemo(() => {
		if (data.top) return "是";
		else return "否";
	}, [data.top]);

	return (
		<Descriptions title="朋友圈" bordered column={1}>
			<Descriptions.Item label="内容">{data.content}</Descriptions.Item>
			<Descriptions.Item label="发布人">{data.user.name}</Descriptions.Item>
			<Descriptions.Item label="置顶">{isTop}</Descriptions.Item>
			<Descriptions.Item label="点赞">{data.dianzanCount}</Descriptions.Item>
			<Descriptions.Item label="修改时间">{data.updatedAt}</Descriptions.Item>
			<Descriptions.Item label="创建时间">{data.createdAt}</Descriptions.Item>
			{data.images.length > 0 && (
				<Descriptions.Item label="图片">
					{data.images.map(item => (
						<Image
							width={140}
							height={80}
							src={item.image_url}
							key={item.id}
							placeholder={<Image width={140} height={80} preview={false} src={zhanwei} />}
						></Image>
					))}
				</Descriptions.Item>
			)}
			{data.videos.length > 0 && (
				<Descriptions.Item label="视频">
					{data.videos.map(item => (
						<>
							<a href={item.video_url} key={item.id}>
								{item.video_url}
							</a>
							<br />
							<br />
						</>
					))}
				</Descriptions.Item>
			)}
		</Descriptions>
	);
};

export default CircleFriendDetail;
